import vue from '@vitejs/plugin-vue'
import type { ConfigEnv, ProxyOptions, UserConfig } from 'vite'
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
import { defineConfig, loadEnv } from 'vite'
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import path, { resolve } from "path";
import UnoCSS from 'unocss/vite'
import progress from 'vite-plugin-progress'

// 简单的代理日志：打印方法、原始路径、目标地址+最终路径、响应码或错误
function attachProxyLogger(proxy: any, options: ProxyOptions) {
  const target = typeof options.target === 'string' ? options.target : ''
  proxy.on('proxyReq', (proxyReq: any, req: any) => {
    const method = (req?.method || 'GET').toUpperCase()
    const url = req?.url || ''
    const proxiedPath = proxyReq.path || url
    console.log(`[Proxy] ${method} ${url} -> ${target}${proxiedPath}`)
  })
  proxy.on('proxyRes', (proxyRes: any, req: any) => {
    const method = (req?.method || 'GET').toUpperCase()
    const url = req?.url || ''
    console.log(`[Proxy] ✔ ${method} ${url} <- ${proxyRes.statusCode}`)
  })
}

const pathSrc = resolve(__dirname, "src");

export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  // 导入的 env 环境变量 - env.VITE_APP_PORT
  const env = loadEnv(mode, process.cwd());
  const isProduction = mode === "production";

  return {
    server: {
      port: 3001,
      // open: true, //2.2-运行后，浏览器自动打开项目
      proxy: {
        // 2.3-配置需要代理的路径
        // '/admin': {
        [env.VITE_APP_BASE_API_CANGQIONG]: {
          target: 'http://localhost:8080', // 目标服务器地址
          changeOrigin: true, // 允许跨域
          // 可选：重写路径（如果后端接口没有/api前缀）
          // rewrite: (path) => path.replace(/^\/api/, ''),
          // 显示前端代理的日志 - 目标地址
          configure: (proxy, options) => attachProxyLogger(proxy, options),
        },

        // 关于文件下载的前缀
        '/downLoadFile': {
          target: 'http://localhost:8080', // 目标服务器地址
          changeOrigin: true, // 允许跨域
          // 可选：重写路径（如果后端接口没有/api前缀）
          rewrite: (path) => path.replace(/^\/downLoadFile/, ''),
          // 显示前端代理的日志 - 目标地址
          configure: (proxy, options) => attachProxyLogger(proxy, options),
        }
      }
    },

    resolve: {
      alias: {
        "@": pathSrc,
      }
    },

    css: {
      // CSS 预处理器
      preprocessorOptions: {
        //define global scss variable
        scss: {
          additionalData: `@use "@/styles/globalColor.scss" as *;`
        }
      }
    },

    plugins: [
      vue(),

      // 打包进度条
      progress({
        format: 'building [:bar] :percent (:elapsed seconds)', // 文本模板
        width: 40,         // 进度条宽度
        total: 200,        // 内部刻度（一般不用改）
        clear: true        // 构建完成后清屏
      }),

      UnoCSS({ /* options */ }),
      AutoImport({
        // # 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        // # 4 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ["vue", 'vue-router'],

        // # 8.1 - elementuiPlus 的按需导入组件 + 图标
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({}),
        ],
        eslintrc: {
          enabled: false, // 是否自动生成 eslint 规则，建议生成之后设置 false 
          filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数 eslint 规则的文件
        },
        // # 指定自动导入函数TS类型声明文件路径
        dts: path.resolve(pathSrc, "types", "auto-imports.d.ts"),
      }),
      // # 指定自动导入组件TS类型声明文件路径
      Components({
        // # 8.1 - elementuiPlus 的按需导入
        resolvers: [
          ElementPlusResolver({
            // 配置主题，可选 'dark' | 'light'
            importStyle: 'css' // 自动导入组件样式
          }),
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ["ep"] // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
          }),
        ],
        dts: path.resolve(pathSrc, "types", "components.d.ts"),
      }),

      // # 8.1 - elementuiPlus 的按需导入
      Icons({
        // 自动安装图标库
        autoInstall: true,
      }),
    ]
  }

})
